<template>
  <div>
    <el-row>
      <el-form ref="usertijiao" :model="userInfo" label-width="auto" class="demo-ruleForm">

        <el-col :span="18">
          <el-form-item>
            <div class="upload-picture-area" style="display: flex; justify-content: center;">
              <el-upload action="" class="avatar-uploader" :show-file-list="false" :before-upload="beforeAvatarUpload" :on-change="onChange">
                <el-avatar :size="80">
                  <img v-if="imageUrl == ''" :src="userInfo.image">
                  <!-- 上传图片最好用png 或者jpg,webp上传就报错 -->
                  <img v-else :src="imageUrl">
                </el-avatar>
              </el-upload>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="昵称">
            <el-input v-model="userInfo.usersName" placeholder="昵称" maxlength="16" show-word-limit></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="电话号码">
            <el-input placeholder="电话" v-model="userInfo.phoneNumber" :disabled="true">
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-form-item label="粉丝数">
      {{userInfo.fansCount}}
    </el-form-item> -->
        <el-col :span="18">
          <el-form-item label="性别">
            <el-radio v-model="userInfo.userSex" label="男">男</el-radio>
            <el-radio v-model="userInfo.userSex" label="女">女</el-radio>
            <!-- <el-radio v-model="userInfo.userSex" label="保密"></el-radio> -->
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="注册时间">
            <el-date-picker label="注册时间" type="date" :disabled="true" placeholder="注册时间"
              v-model="userInfo.userCreationTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="9"></el-col> -->
        <el-col :span="18">
          <el-form-item label="爱好">
            <el-input v-model="userInfo.hobby" placeholder="你有什么爱好捏?" maxlength="16" show-word-limit></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="18">
          <el-form-item label="个人简介">
            <el-input type="textarea" v-model="userInfo.biography" placeholder="请输入内容" maxlength="30"
              show-word-limit></el-input>
          </el-form-item>
        </el-col>

      </el-form>

      <el-col type="flex">
        <el-button type="primary" @click="onsubmit">保存</el-button>
      </el-col>
      <!-- </el-dialog> -->
    </el-row>

  </div>
</template>

    
<script>
import { getPersonaData } from "@/api/personalCenter";
import { UserEdit } from "@/api/user";

export default {
  data() {
    return {
      userId: JSON.parse(localStorage.getItem("user")).id,
      userInfo: {},//个人信息
      editDialog: true,//编辑状态
      // editForm: JSON.parse(localStorage.getItem("user")),
      file: null,
      imageUrl: "",
      loading: false//加载状态
    }

  },
  methods: {
    //获取个人信息
    getPersonaData() {
      getPersonaData({ id: this.userId }).then(res => {
        this.userInfo = res[0];
        console.log(res);
        this.loading = true;
      })
    },
    onChange(file) {
      this.imageUrl = URL.createObjectURL(file.raw);

    },
    beforeAvatarUpload(file) {
      this.file = file;
    },
    onsubmit() {
      let formData = new FormData();
      formData.append("Id", this.userId);
      formData.append("UsersName", this.userInfo.usersName);
      formData.append("Hobby", this.userInfo.hobby);
      formData.append("UserSex", this.userInfo.userSex);
      formData.append("Biography", this.userInfo.biography);
      formData.append("file", this.file);
      UserEdit(formData).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "修改成功",
            showClose: true
          })
        }
        this.editDialog = false;
        this.getPersonaData();
      })
    }

  },
  created() {
    this.getPersonaData();
  }

}
</script>